<template>
  <span>
    <span
      v-if="value === null"
      class="not-set"
    />
    <span v-else-if="template">
      <component
        :is="extendComponent"
        :item="rowData"
      />
    </span>
    <erp-view-text
      v-else-if="type === 'text'"
      :value="value"
      :prop="prop"
    />
    <erp-view-textarea
      v-else-if="type === 'textarea'"
      :value="value"
      :prop="prop"
    />
    <erp-view-image
      v-else-if="type === 'image'"
      :value="value"
      :extra="extra"
      :prop="prop"
    />
    <erp-view-date
      v-else-if="type === 'date'"
      :value="value"
      :prop="prop"
    />
    <erp-view-datetime
      v-else-if="type === 'datetime'"
      :value="value"
      :prop="prop"
    />
    <erp-view-formatter
      v-else-if="type === 'formatter'"
      :value="value"
      :format-type="extra && extra.formatType ? extra.formatType : ''"
      :prop="prop"
    />
    <erp-view-status
      v-else-if="type === 'status'"
      :value="value"
      :row="rowData"
      :extra="extra"
      :prop="prop"
    />
    <erp-view-tinymce
      v-else-if="type === 'tinymce'"
      :value="value"
      :extra="extra"
      :prop="prop"
    />
    <erp-view-id-tip
      v-else-if="type === 'id-tip'"
      :value="value"
      :extra="extra"
      :prop="prop"
      :row="rowData"
    />
    <erp-view-operation
      v-else-if="type === 'operation'"
      :value="value"
      :prop="prop"
    >
      <template slot="operation">
        <slot name="operation" />
      </template>
    </erp-view-operation>
  </span>
</template>

<script>
import Vue from 'vue';
const ErpViewText = () => import('@/components/erp/view/ErpViewText');
const ErpViewTextarea = () => import('@/components/erp/view/ErpViewTextarea');
const ErpViewImage = () => import('@/components/erp/view/ErpViewImage');
const ErpViewDate = () => import('@/components/erp/view/ErpViewDate');
const ErpViewDatetime = () => import('@/components/erp/view/ErpViewDatetime');
const ErpViewOperation = () => import('@/components/erp/view/ErpViewOperation');
const ErpViewFormatter = () => import('@/components/erp/view/ErpViewFormatter');
const ErpViewStatus = () => import('@/components/erp/view/ErpViewStatus');
const ErpViewTinymce = () => import('@/components/erp/view/ErpViewTinymce');
const ErpViewIdTip = () => import('@/components/erp/view/ErpViewIdTip');
/**
 * 详情项
 * @author maolin
 */
export default {
  name: "ErpViewItem",
  components: {
    ErpViewText,
    ErpViewImage,
    ErpViewDate,
    ErpViewDatetime,
    ErpViewOperation,
    ErpViewTextarea,
    ErpViewFormatter,
    ErpViewStatus,
    ErpViewTinymce,
    ErpViewIdTip,
  },
  props: {
    /**
     * 类型
     * @public
     */
    type: {
      type: String,
      default: 'text'
    },
    /**
     * 行数据
     * @public
     */
    rowData: {
      type: Object,
      default: () => {}
    },
    /**
     * 属性值
     * @public
     */
    prop: {
      type: String,
      default: ''
    },
    /**
     * 模版
     * @public
     */
    template: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      type: [String, Number, Array, Object],
      default: ''
    },
    /**
     * 额外配置
     * @public
     */
    extra: {
      type: Object,
      formatType: '',
      default: () => {}
    }
  },
  data () {
    return {
    };
  },
  computed: {
    extendComponent () {
      if (this.template) {
        return Vue.component('ExtendComponent', (resolve, reject) => {
          resolve({
            props: ['item'],
            template: "<span>" + this.template + "</span>"
          });
        });
      }
      return false;
    }
  },
  watch: {

  },
  mounted () {
  }
};
</script>

<style lang="scss" scoped>
.not-set{
    color: #c55;
    font-style: italic;
}

.error-img{
    width: 100%;
    height: 100%;
}
</style>
